<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="14">
        <a-card :loading="loading" title="业务基本信息">
          <template slot="extra">
            <a-button :loading="loading" size="small" type="primary" @click="saveAdd">保存更改</a-button>
          </template>
          <a-form-model
            ref="businessForm"
            :model="businessForm"
            :rules="businessRules"
          >
            <a-form-model-item label="业务类别">
              <a-select
                v-model="businessForm.category"
                placeholder="选择业务类别"
                @change="onChangeCat"
              >
                <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="组别">
              <a-select
                v-model="businessForm.cat_group"
                placeholder="选择组别"
              >
                <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="业务名称">
              <a-input v-model="businessForm.name" type="text" />
            </a-form-model-item>
            <a-form-model-item label="业务描述">
              <a-textarea :rows="3" v-model="businessForm.name_desc" type="text" />
            </a-form-model-item>
            <a-form-model-item label="基础官费">
              <a-input v-model="businessForm.official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户官费">
              <a-input v-model="businessForm.vip_official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户建议报价下限">
              <a-input v-model="businessForm.vip_offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价下限">
              <a-input v-model="businessForm.offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价上限">
              <a-input v-model="businessForm.offer_section_rgt" type="text" />
            </a-form-model-item>
            <a-form-model-item label="申请周期">
              <a-input v-model="businessForm.register_period" type="text" />
            </a-form-model-item>
            <a-form-model-item label="回执时间">
              <a-input v-model="businessForm.receipt_time" type="text" />
            </a-form-model-item>
            <a-form-model-item label="有效期">
              <a-input v-model="businessForm.period_of_validity" type="text" />
            </a-form-model-item>
            <a-form-model-item label="初稿时间">
              <a-input type="text" v-model="businessForm.first_draft_time" />
            </a-form-model-item>
            <a-form-model-item label="改稿时间">
              <a-input type="text" v-model="businessForm.revision_time" />
            </a-form-model-item>
            <a-form-model-item label="ISO人数">
              <a-select
                v-model="businessForm.enterprise_persons"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in personOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="ISO类型">
              <a-select
                v-model="businessForm.auth_type"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in authOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="ISO风险">
              <a-select
                v-model="businessForm.risk"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in riskOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="业务折算LOGO数">
              <a-input type="text" v-model="businessForm.converted_logos_num" />
            </a-form-model-item>
            <a-form-model-item label="专利流程折算数量">
              <a-input type="text" v-model="businessForm.converted_flow_num" />
            </a-form-model-item>
            <a-form-model-item label="专利师折算数量">
              <a-input type="text" v-model="businessForm.converted_engineer_num" />
            </a-form-model-item>
            <a-form-model-item label="业务材料备注说明">
              <quill-editor :value="businessForm.note" @change="onChange"></quill-editor>
            </a-form-model-item>
            <a-form-model-item label="是否隐藏">
              <a-radio-group v-model="businessForm.hide">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否需要办理执照业务">
              <a-radio-group v-model="businessForm.is_license">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否不经过专利师">
              <a-radio-group v-model="businessForm.pass_patentee">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="可领取此业务的角色">
              <a-select
                v-model="defaultRole"
                mode="multiple"
                placeholder="选择可领取此业务的角色"
              >
                <a-select-option v-for="(item,index) in roleOpts" :key="index" :value="index">{{index}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card :loading="loading" title="编辑业务所含材料">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onMat('')">添加所需材料</a-button>
          </template>
          <s-table
            bordered
            ref="matTable"
            size="middle"
            :row-key="(record) => record.mat_id"
            :columns="matColumns"
            :data="matData"
          >
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onMat(record.mat_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delMat(record.mat_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
        <a-card style="margin-top:20px" title="增项管理">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onAdd('')">添加增项</a-button>
          </template>
          <s-table
            bordered
            ref="addTable"
            size="middle"
            :row-key="(record) => record.state_id"
            :columns="addColumns"
            :data="addData"
          >
          </s-table>
        </a-card>
        <a-card style="margin-top:20px" :loading="loading" title="编辑业务官方状态">
          <a-transfer
            show-search
            :data-source="stateData"
            :list-style="{
              width: '250px',
              height: '300px',
            }"
            :titles="['状态库', '已选状态']"
            :target-keys="targetKeys"
            :selected-keys="selectedKeys"
            :render="item => item.title"
          />
        </a-card>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
import QuillEditor from '@/components/Editor/QuillEditor'
import { STable } from '@/components'
import {
  getAdd,
  getCategory,
  postAdd
} from '@/api/business'
import businessColumns from '@/columns/business'
export default {
  components: {
    STable,
    QuillEditor
  },
  name: 'AddBusiness',
  data () {
    return {
      loading: false,
      categoryOpts: {},
      groupOpts: {},
      businessForm: {},
      businessRules: {},
      roleOpts: {},
      defaultRole: [],
      matVisible: false,
      matForm: {},
      matRules: {},
      matColumns: businessColumns.mat_columns,
      matData: () => {
        return new Promise(resolve => {
          resolve({
            page: 1,
            page_size: 10,
            total_count: 0,
            data: []
          })
        })
      },
      stateForm: {},
      stateRules: {},
      stateVisible: false,
      stateColumns: businessColumns.state_columns,
      stateData: [],
      queryParam: {},
      typeOpts: {},
      exampleTypeOpts: {},
      reserveFieldsOpts: {},
      authOpts: {},
      personOpts: {},
      riskOpts: {},
      addColumns: businessColumns.added,
      addData: () => {
        return new Promise(resolve => {
          resolve({
            page: 1,
            page_size: 10,
            total_count: 0,
            data: []
          })
        })
      },
      addVisible: false,
      addForm: {},
      addRules: [],
      targetKeys: [],
      selectedKeys: []
    }
  },
  activated () {
    this.getAdd()
  },
  methods: {
    getAdd () {
      const app = this
      app.loading = true
      getAdd().then(res => {
        const info = res.result
        if (res.status === 0) {
          app.roleOpts = info.role_opts
          app.categoryOpts = info.categoryOpts
          app.authOpts = info.authOpts
          app.personOpts = info.enterprisePersonsOpts
          app.riskOpts = info.riOpts
          app.loading = false
        } else {
          app.$warning({
            title: res.msg
          })
          app.loading = false
        }
      })
    },
    onChange (html) {
      this.businessForm.note = html
    },
    onChangeCat (value) {
      this.groupOpts = {}
      getCategory(value).then(res => {
        this.groupOpts = res.result.categoryGroupOpts
      })
    },
    onMat (id) {
      const app = this
      app.$warning({
        title: '请先保存业务基本信息'
      })
    },
    onState (id) {
      const app = this
      app.$warning({
        title: '请先保存业务基本信息'
      })
    },
    onAdd (id) {
      const app = this
      app.$warning({
        title: '请先保存业务基本信息'
      })
    },
    saveAdd () {
      const app = this
      const data = {}
      app.loading = true
      for (const k in app.businessForm) {
        data['Business[' + k + ']'] = app.businessForm[k]
      }
      for (const k in app.defaultRole) {
        data['Business[roles][' + k + ']'] = app.defaultRole[k]
      }
      postAdd(data).then(res => {
        if (res.status === 0) {
          this.$router.push({ name: 'EditBusiness', params: { id: res.result.business_id } })
        } else {
          app.$warning({
            title: res.msg
          })
        }
      }).finally(() => {
        app.loading = false
      })
    }
  }
}
</script>

<style scoped>
  /deep/ .ant-form-item {
    margin-bottom: 10px
  }
</style>
